<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 使用Vue提交表单就是js的方式  使用js的函数   不要action -->
        <form @submit.prevent="demo()">
            账号： <input type="text" v-model.trim="userInfo.account"> <br>
            密码: <input type="password" v-model.trim="userInfo.password"> <br>
            年龄：<input type="number" v-model.number="userInfo.age"> <br>
            性别：
            男：<input type="radio" name="sex" value="man" v-model="userInfo.sex">
            女：<input type="radio" name="sex" value="women" v-model="userInfo.sex"> <br>
            爱好：
            学习：<input type="checkbox" value="study" v-model="userInfo.hobby">
            打游戏：<input type="checkbox" value="game" v-model="userInfo.hobby">
            吃饭：<input type="checkbox" value="eat" v-model="userInfo.hobby"><br>
            所属校区：
            <select v-model="userInfo.city">
                <option value="">请选择校区</option>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="kunming">昆明</option>
            </select>
            <br>
            其他备注信息：
            <textarea v-model.lazy="userInfo.other">

            </textarea><br> <br>
            <input type="checkbox" v-model="userInfo.agree">我同意xxxx的协议.....<br>
            <button>提交</button>

        </form>


    </div>

</body>

</html>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                /* 收集数据一定要先有存储数据的模型 */
                userInfo: {
                    /*    account: '',
                       password: '',
                       age: 0 */
                    /* 复选框 默认提交boolean */
                    hobby: []

                }



            }
        },
        methods: {
            demo() {
                console.log('提交');
            }
        }


    })

</script>